import { onUnmounted, watch, WatchStopHandle } from 'vue';
import { EventEmitters } from './EventEmitter'; // 根据需要调整导入路径

/**
 * 存储属性监听器的 Map。
 */
const watchMap = new Map<string, WatchStopHandle>();

/**
 * 监听对象属性的变化，并在变化时触发事件。
 * 
 * @param obj - 要监听的对象。
 * @param propName - 要监听的属性名称。
 * @param deep - 是否进行深度监听，默认为 true。
 * @param immediate - 是否立即触发监听器，默认为 true。
 */
export const watchProps = (
    obj: any,
    propName: string,
    deep: boolean = true,
    immediate: boolean = true
) => {
    // 如果该属性还没有监听器，则添加监听器
    if (!watchMap.has(propName)) {
        const stopHandle = watch(
            () => obj, // 返回要监听的对象
            (newValue, oldValue) => {
                // 当属性变化时，触发事件
                EventEmitters.emit(propName, newValue, oldValue);
            },
            {
                deep,  // 深度监听
                immediate, // 立即触发监听器
            }
        );
        // 将监听器存储到 watchMap 中
        watchMap.set(propName, stopHandle);
    }
};

/**
 * 在组件卸载时清除所有属性监听器和事件。
 */
export const useWatchPropsCleanup = () => {
    onUnmounted(() => {
        // 停止所有监听器
        watchMap.forEach(stopHandle => stopHandle());
        // 清空监听器映射
        watchMap.clear();
        // 清空所有事件
        EventEmitters.clear();
    });
};